<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./jquery-2.1.4/jquery.js"></script>
    <title>Title</title>
</head>
<body>
<script>
    $(function () {
        $("#div1").click(function () {
//            $("#div2").slideToggle("fast");
            $("#div2").load("./a.txt");   //1.最简单的jquery 的ajax
            //在网络中各主机之间进行交流的方法有四种：get,post,put,delete
            //利用get方法
            $.get("url地址",function (data,status) {

            })
            //利用post方法
            $.post("url地址",function (data,status) {

            })
            //1.get非常迅速。post较get慢一些。
            //2.get对某些特殊字符的支持不太好。
            //3.get不能缓存（文件，数据库等大型数据不能用get）
            //4.get有传输大小限制，而post没有。

        })
//        $("#div1").dblclick(function () {
//            $("#div2").animate({left:'250px'});
//        })

    })

    function loadXMLDoc() {
        var xmlhttp;
        if(window.XMLHttpRequest){//XMLHttpRequest
            //IE7+,Firefox,chrome,safari都支持
            xmlhttp=new XMLHttpRequest();
        }else{
            //ie5,6
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

        }
        xmlhttp.onreadystatechange=function () {
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("div2").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","./a.txt");
        xmlhttp.send();

    }

</script>
<input type="button" onclick="loadXMLDoc()" value="click">
<div id="div1" style="background-color: aqua;width: 200px;height: 100px"></div>
<div id="div2" style="background-color:#dd11ff;width: 200px;height: 100px"></div>

</body>
</html>